<template>
  <div id="bigdetailed">
    <div id="top">
      <div id="middle">
        <p id="type">
          <a href="index">&#xe6ff; </a>
          主页 >> {{ datas.gtype }}
        </p>
        <img :src="require('@/assets/' + datas.url)" :alt="datas.gname" />
        <div id="right">
          <p id="name">{{ datas.gname }}</p>
          <p id="money">{{ datas.price }}</p>
          <p id="discount">原价：{{ datas.price / 0.8 }}</p>
          <p id="collection">
            <!-- <span class="collectionOne" :style="{color:'#000'}">&#xe640;</span> -->
            <span
              class="collectionOne"
              :style="
                this.collection == 0 ? { color: '#000' } : { color: '#f0c311' }
              "
              @click="collections"
              >&#xe8b9;</span
            >
          </p>
          <p id="introduce">商品描述 ——————————————————————————</p>
          <!-- &#xe8b9;   &#xe8c6-->
          <p id="content">{{ datas.detailed }}</p>
          <p id="date">发布于 {{ datas.date }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import VueCookies from "vue-cookies";
export default {
  props: ["datas"],
  mounted() {
    // 进来先根据uid和gid判断是否收藏了
    this.selectCollections();
  },
  methods: {
    collections: function () {
      (this.collection = !this.collection), console.log(this.collection);
      // 根据this.collection对收藏的表进行修改
      axios({
        method: "POST",
        url: "http://localhost:8081/lo/intercept/collection/setcollection",
        params: {
          uid: VueCookies.get("uid"),
          ucookie: VueCookies.get("ucookie"),
          gid: VueCookies.get("gid"),
          collection: this.collection,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }).then(
        (response) => {
          // console.log(response.data);
        },
        (error) => {
          alert("请求失败,请检查服务器是否开启！");
        }
      );
    },
    selectCollections:function(){
      axios({
        method: "POST",
        url: "http://localhost:8081/lo/intercept/collection/selectcollections",
        params: {
          uid: VueCookies.get("uid"),
          ucookie: VueCookies.get("ucookie"),
          gid: VueCookies.get("gid"),
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }).then(
        (response) => {
          // console.log(response.data);
          if(response.data){
            this.collection = 1
          }else{
            this.collection = 0
          }
        },
        (error) => {
          alert("请求失败,请检查服务器是否开启！");
        }
      );
    }
  },
  data() {
    return {
      collection: 0,
    };
  },
};
</script>

<style scoped>
@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont_six.ttf") format("truetype");
}
#bigdetailed {
  /* overflow: hidden; */
  width: 100%;
  /* height: 1200px; */
  background-color: #eeeeee;
}

#bigdetailed #top {
  width: 85%;
  height: 600px;
  /* border: 1px solid #000; */
  margin-left: 10%;
  padding-top: 110px;
}

#top #middle {
  width: 100%;
  height: 500px;
  padding-top: 30px;
  background-color: #fff;
}
#top #type {
  width: 300px;
  margin: 0px 0px 15px 20px;
  font-size: 24px;
  color: #a6abab;
}

#top #type a {
  cursor: pointer; /* 经过有手指*/
  text-decoration: none;
  color: #224747;
  font-family: "iconfont" !important;
}

#top img {
  display: inline-block;
  width: 38%;
  height: 400px;
  margin-left: 2%;
  vertical-align: bottom; /*调整对齐线*/
  object-fit: scale-down;
}

#top #right {
  display: inline-block;
  width: 48%;
  height: 400px;
  margin-left: 5%;
  /* border: 1px solid #000; */
  padding-left: 5%;
}

#top #right #name {
  font-size: 24px;
  text-indent: 20px;
}

#top #right #money {
  font-size: 20px;
  color: red;
  text-indent: 20px;
}

#top #right #discount {
  font-size: 18px;
  text-decoration: line-through;
  color: #beb9b6;
  text-indent: 20px;
}
#top #right #introduce {
  margin-top: 20px;
}

#collection {
  font-family: "iconfont" !important;
  font-size: 28px;
  cursor: pointer; /* 经过有手指*/
}

#collection .collectionOne {
  margin-left: 400px;
  margin-right: 20px;
}

#top #right #content {
  width: 100%;
  height: 85px;
  text-indent: 2em;
}

#top #right #date {
  width: 100%;
  text-align: center;
  color: #acacac;
}
</style>
  